﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
     <script type="text/javascript" src="javascript/jquery-1.7.js"></script>    
     <script type="text/javascript" src="javascript/knockout-2.1.0.js"></script> 
</head>
<body>
    <script type="text/javascript">
        
        $(function(){
              var viewModel= function(first,last){
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);
                this.fullName = ko.computed(function() {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);            
            };
            ko.applyBindings(new viewModel("Sam","Earth"));    
       });
      
    </script>
    
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Welcome: <span data-bind="text: fullName"></span></h2>
   
</body>
</html>
